<template>
	<view class="pages">
		<u-navbar title="下退货申请单" :autoBack="true" placeholder bgColor="#fff"></u-navbar>
		<view class="top-search">
			<view class="top-input">
				<u--input
					placeholder="名称|编码|条码"
					border="surround"
					shape="circle"
					v-model="searchVal"
					@change="change"
					@blur="blur"
				></u--input>
				<view class="btn">
					PDA扫码
				</view>
				<image src="../../static/search.png" mode="widthFix"></image>
			</view>
			<view class="" @click="pdaScanCode">
				<u-icon name="scan" size="30"></u-icon>
			</view>
		</view>
		<view class="form-data">
			<u--form
				labelPosition="left"
				:model="orderData"
				:rules="rules"
				ref="uForm"
			>
				<u-form-item
					label="客户"
					prop="userInfo.name"
					borderBottom
					required
					@click="showSex = true; hideKeyboard()"
				>
					<u--input
						v-model="orderData.userInfo.name"
						disabled
						disabledColor="#ffffff"
						placeholder="请选择客户"
						border="none"
					></u--input>
					<u-icon
						slot="right"
						name="arrow-right"
					></u-icon>
				</u-form-item>
				<u-form-item
					label="备注"
					borderBottom
					@click="showSex = true; hideKeyboard()"
				>
					<u--input
						v-model="orderData.userInfo.remark"
						disabled
						disabledColor="#ffffff"
						placeholder="请填写备注"
						border="none"
					></u--input>
					<u-icon
						slot="right"
						name="arrow-right"
					></u-icon>
				</u-form-item>
				<view class="" v-show="dataListShow">
					<u-form-item
						label="仓库"
						prop="userInfo.warehouse"
						borderBottom
						required
						@click="showSex = true; hideKeyboard()"
					>
						<u--input
							v-model="orderData.userInfo.warehouse"
							disabled
							disabledColor="#ffffff"
							placeholder="请选择仓库"
							border="none"
						></u--input>
						<u-icon
							slot="right"
							name="arrow-right"
						></u-icon>
					</u-form-item>
					<u-form-item
						label="单据日期"
						prop="userInfo.invoicesDate"
						borderBottom
						required
						@click="showSex = true; hideKeyboard()"
					>
						<u--input
							v-model="orderData.userInfo.invoicesDate"
							disabled
							disabledColor="#ffffff"
							placeholder="请选择单据日期"
							border="none"
						></u--input>
						<u-icon
							slot="right"
							name="arrow-right"
						></u-icon>
					</u-form-item>
					<u-form-item
						label="到货地址"
						borderBottom
						@click="showSex = true; hideKeyboard()"
					>
						<u--input
							v-model="orderData.userInfo.address"
							disabled
							disabledColor="#ffffff"
							placeholder="请填写到货地址"
							border="none"
						></u--input>
						<u-icon
							slot="right"
							name="arrow-right"
						></u-icon>
					</u-form-item>
					<u-form-item
						label="联系人"
						borderBottom
					>
						<u--input
							v-model="orderData.userInfo.contact"
							placeholder="请填写联系人"
							border="none"
						></u--input>
						<u-icon
							slot="right"
							name="arrow-right"
						></u-icon>
					</u-form-item>
					<u-form-item
						label="客户电话"
						borderBottom
					>
						<u--input
							v-model="orderData.userInfo.phone"
							placeholder="请填写客户电话"
							border="none"
						></u--input>
					</u-form-item>
					<u-form-item
						label="售后类型"
						prop="userInfo.returnGoodsType"
						borderBottom
						required
						@click="showSex = true; hideKeyboard()"
					>
						<u--input
							v-model="orderData.userInfo.returnGoodsType"
							disabled
							disabledColor="#ffffff"
							placeholder="请选择售后类型"
							border="none"
						></u--input>
						<u-icon
							slot="right"
							name="arrow-right"
						></u-icon>
					</u-form-item>
					<u-form-item
						label="退货原因"
						borderBottom
					>
						<u--input
							v-model="orderData.userInfo.returnGoodsWay"
							placeholder="请填写退货原因"
							border="none"
						></u--input>
					</u-form-item>
					<u-form-item
						label="退货说明"
						borderBottom
					>
						<u--input
							v-model="orderData.userInfo.returnGoodsIllustrate"
							placeholder="请填写退货说明"
							border="none"
						></u--input>
					</u-form-item>
					<u-form-item
						label="部门"
						prop="userInfo.department"
						borderBottom
						required
						@click="showSex = true; hideKeyboard()"
					>
						<u--input
							v-model="orderData.userInfo.department"
							disabled
							disabledColor="#ffffff"
							placeholder="请选择部门"
							border="none"
						></u--input>
						<u-icon
							slot="right"
							name="arrow-right"
						></u-icon>
					</u-form-item>
					<u-form-item
						label="业务员"
						prop="userInfo.salesman"
						borderBottom
						required
						@click="showSex = true; hideKeyboard()"
					>
						<u--input
							v-model="orderData.userInfo.salesman"
							disabled
							disabledColor="#ffffff"
							placeholder="请选择业务员"
							border="none"
						></u--input>
						<u-icon
							slot="right"
							name="arrow-right"
						></u-icon>
					</u-form-item>
					<u-form-item
						label="排尺员"
						borderBottom
					>
						<u--input
							v-model="orderData.userInfo.paichiyuan"
							placeholder="请填写排尺员"
							border="none"
						></u--input>
					</u-form-item>
					<u-form-item
						label="是否开发票"
						prop="userInfo.invoice"
						borderBottom
						required
						@click="showSex = true; hideKeyboard()"
					>
						<u--input
							v-model="orderData.userInfo.invoice"
							disabled
							disabledColor="#ffffff"
							placeholder="请选择是否开票"
							border="none"
						></u--input>
						<u-icon
							slot="right"
							name="arrow-right"
						></u-icon>
					</u-form-item>
					<view class="radio">
						<u-radio-group
							v-model="radiovalue"
							placement="column"
							:borderBottom="true"
							@change="groupChange"
						>
							<u-radio
								:customStyle="{marginBottom: '25rpx'}"
								v-for="item in radiolist"
								:key="item.key"
								:label="item.val"
								:name="item.key"
								@change="radioChange"
							>
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="foldBtn" v-if="dataListShow" @click="dataListShow = !dataListShow">
					<view class="" style="margin-right: 12rpx;">收起</view>
					<u-icon name="arrow-up"></u-icon>
				</view>
				<view class="foldBtn" v-else @click="dataListShow = !dataListShow">
					<view class="" style="margin-right: 12rpx;">完整信息</view>
					<u-icon name="arrow-down"></u-icon>
				</view>
			</u--form>
		</view>
		<view class="goods-box">
			<view class="title">商品列表</view>
			<view class="goods-data" v-if="goodsList.length != 0">
				<view class="goods-list" v-for="(item, index) in goodsList" :key="item.id">
					<view class="list-name">
						<view class="name u-line-2">{{index+1}} . {{item.goodsName}}</view>
						<image :src="item.goodsImg" mode="" @click="imageBig(item.goodsImg)"></image>
						<view class=""><u-icon name="trash" size="24"></u-icon></view>
					</view>
					<view class="list-price">
						<view class="price">单价：{{item.unitPrice}}</view>
						<view class="number">
							<view class="">数量：</view>
							<u--input
								placeholder="请输入数量"
								v-model="item.goodsNumber"
								border="bottom"
								@change="change"
							></u--input>
							<view class="">{{item.unit}}</view>
						</view>
					</view>
					<view class="list-price">
						<view class="price">
							<view class="" style="margin-right: 20rpx;">赠品</view>
							<u-switch :value="item.gifts == '1'" ></u-switch>
						</view>
						<view class="number">
							<view class="">金额：{{item.price}}</view>
						</view>
					</view>
					<view class="stocksBtn" style="display: flex;align-items: center;justify-content: center;">
						存货批发价
						<u-icon name="arrow-down" size="15" color="#2677f0"></u-icon>
					</view>
				</view>
			</view>
			<view class="goods-null" v-else>
				您还没有选存货~
			</view>
		</view>
		<view class="bottom-box">
			<view class="top-list">
				<view class="">
					合计：<text style="color: red;">￥0.00</text>
				</view>
				<view class="">
					共0种，数量合计：0
				</view>
			</view>
			<view class="list">
				<view class="two">常用单据</view>
				<view class="three" @click="jumpTo('/other/salesOrder/stocksPage')">选存货</view>
			</view>
		</view>
		<u-modal
			:show="showNum"
			title="请填写商品数量"
			showCancelButton
			@confirm="numConfirm"
			@cancel="showNum = false"
		>
			<view class="goodsNum-modal">
				<view class="">商品名称</view>
				<view class="" style="display: flex; margin-bottom: 10rpx;">
					<view class="" style="margin-right: 8rpx;">可用量：10把</view>
					<view class="">现存量：10把</view>
				</view>
				<u--input
					placeholder="请输入数量"
					border="surround"
					type="number"
					v-model="goodsNumber"
				></u--input>
			</view>
		</u-modal>
		<u-action-sheet
			:show="showSex"
			:actions="actions"
			title="请选择客户"
			description="如果选择保密会报错"
			@close="showSex = false"
			@select="sexSelect"
		>
		</u-action-sheet>
		<u-overlay :show="overlayShow" @click="overlayShow = false">
			<image class="overlayImage" :src="overlayImg" mode="widthFix"></image>
		</u-overlay>
	</view>
</template>

<script>
	export default {
	  data() {
	    return {
				id: '',
				searchVal: '',
				dataListShow: false,
				giftsShow: true,
				showNum: false,
				showSex: false,
				overlayShow: false,
				orderData: {
					userInfo: {
						name: '',
						remark: '',
						warehouse: '',
						invoicesDate: '',
						address: '',
						contact: '',
						phone: '',
						returnGoodsType: '',
						returnGoodsWay: '',
						returnGoodsIllustrate: '',
						department: '',
						salesman: '',
						paichiyuan: '',
						invoice: '',
					},
				},
				actions: [
					{
						name: '张三',
					},
					{
						name: '李四',
					},
					{
						name: '王五',
					},
				],
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请选择客户',
						trigger: ['blur', 'change']
					},
					'userInfo.warehouse': {
						type: 'string',
						required: true,
						message: '请选择仓库',
						trigger: ['blur', 'change']
					},
					'userInfo.invoicesDate': {
						type: 'string',
						required: true,
						message: '请选择单据日期',
						trigger: ['blur', 'change']
					},
					'userInfo.department': {
						type: 'string',
						required: true,
						message: '请选择部门',
						trigger: ['blur', 'change']
					},
					'userInfo.returnGoodsType': {
						type: 'string',
						required: true,
						message: '请选择售后类型',
						trigger: ['blur', 'change']
					},
					'userInfo.invoice': {
						type: 'string',
						required: true,
						message: '请选择是否开票',
						trigger: ['blur', 'change']
					},
				},
				radio: '',
				switchVal: false,
				radiolist: [
					{
						val: '隐藏价格信息',
						key: '1',
						disabled: false
					},
					{
						val: '自动获取价格',
						key: '2',
						disabled: false
					},
					{
						val: '保存时重新公式计算',
						key: '3',
						disabled: false
					}, {
						val: '保存时金额自动进位取整',
						key: '4',
						disabled: false
					}
				],
				radiovalue: '2',
				goodsNumber: 0,
				goodsList: [
					{
						id: 123,
						goodsName: '娃哈哈',
						unitPrice: 70,
						goodsNumber: 1,
						unit: '把',
						price: 70,
						gifts: '1',
						goodsImg: '../../static/add.png',
					},
					{
						id: 456,
						goodsName: '泉阳泉',
						unitPrice: 70,
						goodsNumber: 1,
						unit: '箱',
						price: 70,
						gifts: '2',
						goodsImg: '../../static/add.png',
					},
					{
						id: 789,
						goodsName: '百岁山',
						unitPrice: 90,
						goodsNumber: 1,
						unit: '箱',
						price: 90,
						gifts: '1',
						goodsImg: '../../static/add.png',
					},
				],
				overlayImg: '',
	    }
	  },
	  onLoad(option) {
			this.id = option.id
	  },
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
	  methods: {
			pdaScanCode() {
				// 调起条码扫描
				uni.scanCode({
					scanType: ['barCode'],
					success: function (res) {
						console.log(res)
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			},
			numConfirm() {
				this.showNum = false
			},
			imageBig(url) {
				this.overlayImg = url
				this.overlayShow = true
			},
	    sexSelect(e) {
				this.orderData.userInfo.name = e.name
				this.$refs.uForm.validateField('userInfo.name')
			},
	  }
	}
</script>

<style lang="scss" scoped>

	::v-deep .u-form-item__body__left {
		width: auto !important;
		margin-right: 20rpx;
	}
	::v-deep .u-line {
		transform: scaleY(1) !important;
	}
	.pages{
		width: 750rpx;
		min-height: 100vh;
		padding-bottom: 40rpx;
		.top-search {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #d7dbd6;
			padding: 20rpx 30rpx;
			::v-deep .u-input {
				height: 75rpx;
				background-color: #fff;
				padding-left: 80rpx !important;
			}
			.top-input {
				width: 90%;
				position: relative;
				.btn {
					position: absolute;
					top: 0;
					right: 20rpx;
					height: 75rpx;
					line-height: 75rpx;
				}
				image {
					position: absolute;
					top: 20rpx;
					left: 24rpx;
					width: 40rpx;
					height: auto;
				}
			}
		}
		.form-data {
			margin: 0 40rpx 20rpx;
			.radio {
				margin-top: 20rpx;
			}
			.foldBtn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 200rpx;
				padding: 10rpx 0;
				border: 1px solid #d7dbd6;
				border-radius: 30rpx;
				margin: 26rpx auto 0;
			}
		}
		.goods-box {
			margin-bottom: 260rpx;
			.title {
				width: 100%;
				height: 50rpx;
				line-height: 50rpx;
				background-color: #eee6e7;
				padding: 0 20rpx;
				margin-top: 20rpx;
			}
			.goods-data {
				.goods-list {
					width: 100%;
					padding: 20rpx 30rpx;
					border-bottom: 1px solid #5f6061;
					.list-name {
						display: flex;
						justify-content: space-between;
						align-items: center;
						.name {
							width: 80%;
							font-size: 32rpx;
						}
						image {
							width: 40rpx;
							height: 40rpx;
						}
					}
					.list-price {
						display: flex;
						align-items: center;
						margin: 10rpx 0 20rpx;
						.price {
							width: 50%;
							display: flex;
							align-items: center;
						}
						.number {
							width: 50%;
							display: flex;
							align-items: center;
						}
					}
					.stocksBtn {
						width: 230rpx;
						line-height: 50rpx;
						border: 1px solid #2677f0;
						border-radius: 10rpx;
						color: #2677f0;
						margin-left: auto;
					}
				}
			}
			.goods-null {
				width: 100%;
				min-height: 500rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
			}
		}
		.bottom-box {
			position: fixed;
			bottom: 0;
			background-color: #fff;
			width: 100%;
			.top-list {
				background-color: #e4c5aa;
				padding: 20rpx 40rpx;
			}
			.list {
				display: flex;
				padding-bottom: 60rpx;
				font-size: 30rpx;
				.one {
					flex: 1;
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
				}
				.two {
					flex: 1;
					height: 100rpx;
					line-height: 100rpx;
					border-left: 1px solid #d7dbd6; 
					border-right: 1px solid #d7dbd6; 
					text-align: center;
				}
				.three {
					flex: 1;
					height: 100rpx;
					line-height: 100rpx;
					color: #fff;
					background-color: #2677f0;
					text-align: center;
				}
			}
		}
	}
	.goodsNum-modal {
		width: 100%;
		line-height: 50rpx;
	}
	.overlayImage {
		width: 80%;
		margin: auto;
	}
</style>